<%@page contentType="text/html; charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/init.jsp"%>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 60%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">
                <form id="saveForm" action="/act/save" method="post" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">
                            所有者<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <select name="owner" owner class="form-control" id="create-marketActivityOwner">
                                <option></option>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">
                            名称<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <input name="name" type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startTime" class="col-sm-2 control-label">开始日期&nbsp;</label>
                        <div class="col-sm-4">
                            <input name="startDate" date type="text" class="form-control" id="create-startTime">
                        </div>
                        <label for="create-endTime" class="col-sm-2 control-label">结束日期&nbsp;</label>
                        <div class="col-sm-4">
                            <input name="endDate" date type="text" class="form-control" id="create-endTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-cost" class="col-sm-2 control-label">成本&nbsp;</label>
                        <div class="col-sm-10">
                            <input name="cost" type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-describe" class="col-sm-2 control-label">描述&nbsp;</label>
                        <div class="col-sm-10">
                            <textarea name="description" class="form-control" rows="3" id="create-describe"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 60%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" action="/act/edit" method="post" class="form-horizontal" role="form">
                    <input type="hidden" name="id" />
                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">
                            所有者<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <select name="owner" owner class="form-control" id="edit-marketActivityOwner">
                                <option></option>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">
                            名称<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <input name="name" type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期&nbsp;</label>
                        <div class="col-sm-4">
                            <input name="startDate" date type="text" class="form-control" id="edit-startTime" value="2020-10-10">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期&nbsp;</label>
                        <div class="col-sm-4">
                            <input name="endDate" date type="text" class="form-control" id="edit-endTime" value="2020-10-20">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本&nbsp;</label>
                        <div class="col-sm-10">
                            <input name="cost" type="text" class="form-control" id="edit-cost" value="5,000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-describe" class="col-sm-2 control-label">描述&nbsp;</label>
                        <div class="col-sm-10">
                            <textarea name="description" class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary" id="updateBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<%@include file="/WEB-INF/jsp/inc/dialog/importExcel.jsp"%>

<div class="page-header">
    <h3>市场活动列表</h3>
</div>

<div class="btn-toolbar" role="toolbar" style="height: 50px;margin-top:20px;">
    <div class="btn-group">
        <button class="btn btn-primary" data-toggle="modal" data-target="#createActivityModal">
            <span class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button class="btn btn-default" id="editBtn">
            <span class="glyphicon glyphicon-pencil"></span> 修改
        </button>
        <button class="btn btn-danger" id="delBtn">
            <span class="glyphicon glyphicon-minus"></span> 删除
        </button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default" data-toggle="modal" data-target="#importModal">
            <span class="glyphicon glyphicon-import"></span> 导入
        </button>
        <button class="btn btn-default" onclick="location.href='/act/exportExcel'">
            <span class="glyphicon glyphicon-export"></span> 导出
        </button>
    </div>
</div>

<div>
    <table class="table table-hover table-striped">
        <thead>
        <tr style="background-color:#d9edf7">
            <th><input id="selectAll" type="checkbox"/></th>
            <th>名称</th>
            <th>所有者</th>
            <th>开始日期</th>
            <th>结束日期</th>
            <th>活动成本</th>
        </tr>
        </thead>
        <tbody id="dataBody"></tbody>
    </table>
</div>

<script>
    var importURL = "/act/import";
    function load($) {
        $ = $ || jQuery;
        $.get('/act/getAll', function (data) {
            let html = "";
            for (const act of data) {
                html += `<tr>
                                <td><input name="id" value="${'${act.id}'}" type="checkbox"/></td>
                                <td>
                                    <a href="javascript:;" url='/activity/detail.html?id=${"${act.id}"}'>${"${act.name}"}</a>
                                </td>
                                <td>${"${act.owner}"}</td>
                                <td>${"${act.startDate}"}</td>
                                <td>${"${act.endDate}"}</td>
                                <td>${"${act.cost}"}</td>
                            </tr>`
            }
            $("#dataBody").html(html);
        });
    }

    jQuery(function ($) {
        load($);

        $("#saveBtn").click(function () {
            $("#saveForm").ajaxSubmit(function (data) {
                if (data.success) {
                    load();
                    closeDialog();
                    $("#saveForm")[0].reset();
                }
            });
        });

        $("#editBtn").click(function () {
            let $selected = $(":checkbox[name=id]:checked");
            if ($selected.size() != 1) {
                alert("必须且只能选一个！");
                return;
            }
            // 初始化表单数据
            $("#editForm").initForm("/act/getById?id="+$selected.val());
            $("#editActivityModal").modal('show');
        });

        $("#updateBtn").click(function () {
            $("#editForm").ajaxSubmit(function (data) {
                if (data.success) {
                    load();
                    closeDialog();
                }
            })
        });

        $("#delBtn").click(function () {
            let $selected = $(":checkbox[name=id]:checked");
            if ($selected.size() == 0) {
                alert("请选择要删除的数据！");
                return;
            }

            if(!confirm("确定删除吗？")) {
                return;
            }

            // ids: "1,2,3"
            let ids = $selected.map(function () {
                return this.value;
            }).get().join(",");

            $.ajax({
                url: '/act/delete?ids='+ids,
                type: "delete",
                success(data) {
                    if (data.success) {
                        load();
                    }
                }
            })
        });
    });
</script>